.container {
	background-color: $uni-bg-color;
	padding: 24rpx 0;
}

.free_course_info {
	display: flex;
	align-items: center;
	width: 694rpx;
	margin: 0 auto;
	padding: 24rpx 0;
	gap: 12rpx;
	
	.name {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}
	
	.tag {
		margin-left: 14rpx;
		transform: scale(0.9);
	}
	
	&::before {
		content: '';
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(to bottom, #3c9cff, #5cadff);
		border-radius: 4rpx;
	}
}

.info {
	display: flex;
	align-items: center;
	width: 694rpx;
	margin: 0 auto 24rpx;
	// padding: 16rpx 24rpx;
	border-radius: 16rpx;
	background: linear-gradient(135deg, #fff5e6, #ffe4ba);
	box-shadow: 0 4rpx 12rpx rgba(185, 138, 67, 0.15);
	
	.text {
		margin-left: 14rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #B37644;
		line-height: 1.5;
	}
	
	.logo {
		width: 48rpx;
		height: 48rpx;
		background-image: url("'/%3E %3C/defs%3E %3Crect id='image' width='24.000000' height='24.000000' fill='url(%23pattern_1_510)' fill-opacity='1.000000'/%3E %3C/svg%3E ");
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: 20rpx;
		flex-shrink: 0;
	}
}

.grid_container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16rpx;
	width: 694rpx;
	margin: 0 auto;
	padding: 16rpx 0;

	.item {
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		aspect-ratio: 16/11;
		background-color: #f5f5f5;
		transition: transform 0.2s;
		
		&:active:not(.empty) {
			transform: scale(0.98);
		}

		.cover {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.video_info {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

			.duration {
				position: absolute;
				bottom: 12rpx;
				right: 12rpx;
				padding: 4rpx 8rpx;
				font-size: 20rpx;
				color: #fff;
				background: rgba(0,0,0,0.5);
				border-radius: 4rpx;
			}

			.play_icon {
				opacity: 0.8;
				transition: opacity 0.3s;
				
				&:active {
					opacity: 1;
				}
			}
		}

		.lock_mask {
			position: absolute;
			inset: 0;
			background: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 12rpx;

			.lock_text {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.empty_placeholder {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			
			text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

.grid_operation {
	width: 694rpx;
	margin: 32rpx auto;
	
	.icon_group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		
		.page_btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 16rpx 32rpx;
			background: #fff;
			border-radius: 40rpx;
			transition: all 0.3s;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			
			text {
				font-size: 26rpx;
				color: #3c9cff;
				font-weight: 500;
			}
			
			&:active:not(.disabled) {
				transform: scale(0.95);
				background: rgba(60, 156, 255, 0.1);
			}
			
			&.disabled {
				opacity: 0.5;
				background: #f5f5f5;
				box-shadow: none;
				
				text {
					color: #999;
				}
			}
		}
		
		.page_info {
			font-size: 26rpx;
			color: #666;
			font-weight: 400;
			padding: 6rpx 20rpx;
			background: #f5f5f5;
			border-radius: 24rpx;
		}
	}
}


